<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>JavaScript下拉菜单</title> 
<style type="text/css"> 

#navigation, #navigation li ul { 
list-style-type:none; 
} 
#navigation { 
margin:20px; 
} 
#navigation li { 
float:left; 
text-align:center; 
position:relative; 
} 
#navigation li a:link, #navigation li a:visited { 
display:block; 
text-decoration:none; 
color:#000; 
width:120px; 
height:40px; 
line-height:40px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#fff; 
padding-left:10px; 
} 
#navigation li a:hover { 
color:#4f88c8; 
background:#fff; 
} 
#navigation li ul li a:hover { 
color:#4f88c8; 
background:#fff; 
} 
#navigation li ul { 
display:none; 
position:absolute; 
top:40px; 
left:0; 
margin-top:1px; 
width:120px; 
} 
#navigation li ul li ul { 
display:none; 
position:absolute; 
top:0px; 
left:130px; 
margin-top:0; 
margin-left:1px; 
width:120px; 
} 
</style> 
<script type="text/javascript"> 
function displaySubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display = "none"; 
} 
</script> 
</head> 
<body> <ul id="navigation"> 
<li> 
<a href="#">瑾辉首页</a> 
</li>

 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">关于瑾辉</a> 
<ul> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">董事长致辞</a> 

</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">瑾辉概况</a>
<ul> 
<li><a href="#">瑾辉介绍</a></li> 
<li><a href="#">瑾辉管理层</a></li> 
<li><a href="#">瑾辉组织架构</a></li> 
<li><a href="#">瑾辉经营业绩</a></li>
<li><a href="#">瑾辉发展历程</a></li>
<li><a href="#">瑾辉资质荣誉</a></li>    
</ul> </li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">瑾辉文化</a> 

</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">瑾辉管理</a> 

</li> 
</ul> 
</li> 
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">项目前景</a> 
<ul> 
<li><a href="#">产品介绍</a></li> 
<li><a href="#">应用领域</a></li> 
<li><a href="#">我们的优势</a></li> 
</ul> 
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">资讯中心</a> 
<ul> 
<li><a href="#">行业资讯</a></li> 
<li><a href="#">瑾辉动态</a></li> 
<li><a href="#">媒体焦点</a></li> 
<li><a href="#">通知公告</a></li>
<li><a href="#">视频中心</a></li>  
</ul> 
</li>

<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> 
<a href="#">瑾辉商学院</a> 
<ul> 
<li><a href="#">商学院介绍</a></li> 
<li><a href="#">商学院概况</a></li> 

</ul> 
</li>
</ul>
 
</body> 
</html> 